<template>
  <div>
    <div class="Activity">
        <tab active-color="#D3A042">
            <tab-item selected @on-item-click="onItemClick(1)"  >早会</tab-item>
            <tab-item @on-item-click="onItemClick(2)">培训</tab-item>
        </tab> 
        <div v-show="showTab == 1" class="tabBg">
            <ul class="list">
            <li class="listItem">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemImg"/>
                 <p class="itemTitle">微信分会第37次早会
                </p>
                <div class="bottomView"> 
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemIcon"/>
                    <sapn style="font-size:15px;vertical-align: top;color:rgb(139,140,141)">8月7日09:50-8月7日09:50</sapn>
                    <span class="signUp">可报名</span>
                </div>
            </li>
        </ul>    
            
        </div>  
        <div v-show="showTab == 2" class="tabBg">2</div>
   
    </div>
  </div>
</template>


<script>
import { Tab , TabItem} from 'vux'

export default {    
  name: 'Activity',
  data () {
    return {
        showTab: 1
    }
  },
  components: {
    Tab,
    TabItem
  },
  methods: {
    onItemClick (index) {
        this.showTab = index
    //   console.log('on item click:', index)
    },
 
  }
}
</script>

<style  scoped>
    .Activity {
        background-color: #ECECEC;
        width: 100%;
        height: 100%;
    }
    .tabBg {
        background-color: #ECECEC;
        width: 100%;
        height: 100%;
    }
    .list {
        margin: 10px;
    }
    .listItem {
        border-radius: 8px;
        background-color: white;
    }
    .itemImg {
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
        width: 100%;
        height: 170px;
    }
    .itemTitle {
        margin-top: 5px;
        margin-left: 10px;
        font-size: 18px;
    }
    .bottomView {
        /* height: 20px; */
        width: 100%;
        /* display: flex; */
        margin-top: 10px;
        /* flex-direction: row; */
    }
    .itemIcon {
        margin-left: 10px;
        height: 20px;
        width: 20px;
        padding-bottom: 10px;
    }
    .signUp {
      background-color: #D59C58;
      width: 60px;
      height: 20px;
      font-size: 14px;
      /* margin-right: 10px; */
      float: right;
      margin-right: 10px;
      color: white;
      border-radius: 10px;
      text-align:center;
      display: inline-block;
    }
    
</style>
